<template>
  <div class="box">
    <div class="bg">
      <div class="topfix">
        <h1>
          <span>千千动听</span>
        </h1>
      </div>
    </div>
    <ul class="topnav">
      <li>
        <router-link to="/"> <van-icon name="good-job" />推荐歌单 </router-link>
      </li>
      <li>
        <router-link to="/hot"> <van-icon name="fire" />热歌榜 </router-link>
      </li>
      <li>
        <router-link to="/musichome"
          ><van-icon name="wap-home" />音乐馆</router-link
        >
      </li>
      <li>
        <router-link to="/search"> <van-icon name="search" />搜索 </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "TopNav",
  data() {
    return {};
  }
};
</script>

<style lang="less" scoped>
@bcolor: rgb(250, 208, 70);

.box {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 8;

  .bg {
    width: 100vw;
    height: 44px;
    background: black;
    padding: 0 10px;
    .topfix {
      height: 44px;
      display: flex;
      justify-content: center;
      align-items: center;
      // color: rgb(240, 240, 240);
      h1 {
        font-weight: bolder;
        font-size: 20px;
        color: white;
        img {
          width: 25px;
          height: 25px;
          vertical-align: bottom;
        }
      }
    }
  }

  .topnav {
    width: 100%;
    display: flex;
    // background: white;
    li {
      flex: 1;
      line-height: 40px;
      text-align: center;
      background: rgb(13, 13, 13);
      i {
        line-height: 40px;
      }
      a {
        display: inline-block;

        text-decoration: none;
        font-size: 18x;
        &.router-link-exact-active {
          color: @bcolor;
          border-bottom: 3px solid @bcolor;
        }
      }
    }
  }
}
</style>
